<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏+弹出功能实现</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- JQuery操作动画 
		 show()           功能： 显示效果     本质：display:block
		 hide()           功能： 隐藏效果     本质：display:none
		 
		 slideDown()      功能： 向下（滑动式）效果
		 slideUp()        功能： 向上（滑动式）效果
		 
		 fadeIn(毫秒数)   功能：淡入  本质：显示+透明度：0~1
		 fadeOut(毫秒数)  功能：淡出  本质：隐藏+透明度：1~0
		-->
		
		<style>
			div{
				width: 500px;
				height: 500px;
				background-color: #ff0;
				display: none;
			}
		</style>
	</head>
	<body>
		<button id="show">显示按钮</button>
		<button id="hide">隐藏按钮</button>
		<button id="slideDown">滑动式向下按钮</button>
		<button id="slideUp">滑动式向上按钮</button>
		<button id="fi">淡入按钮</button>
		<button id="fo">淡出按钮</button>
		<div></div>
		<script>
			/*$("button").click(function(){
				//隐藏   css属性直接给元素设置
				$("div").css("display","block").css("border-radius","50%").css("background","#000");
			});*/
			
			/* JQ动画：显示和隐藏 */
			$("#show").click(function(){
				//显示   css属性直接给元素设置
				$("div").show();
			});
			$("#hide").click(function(){
				//隐藏   css属性直接给元素设置
				$("div").hide();
			});
			
			/*  滑动式效果  */
			$("#slideDown").click(function(){
				//显示   css属性直接给元素设置
				$("div").slideDown();
			});
			$("#slideUp").click(function(){
				//隐藏   css属性直接给元素设置
				$("div").slideUp();
			});
			
			/*  淡入和淡出  */
			$("#fi").click(function(){
				//淡入   css属性直接给元素设置
				$("div").fadeIn();
			});
			$("#fo").click(function(){
				//淡出   css属性直接给元素设置
				$("div").fadeOut();
			});
			
		</script>
	</body>
</html>